<template>
  <div>
    <div align="center">
      <h1>电子犬证</h1>
      <div v-for="dog in dogs" :key="dog.id">
        <!-- 电子犬证的上传与展示 -->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:5051/image/upload"
          :show-file-list="false"
          :on-success="handleDogetcImage"
          style="margin-left: 3%; margin-top: 5%"
        >
          <img v-if="dog.dogetc_image" :src="dog.dogetc_image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <input type="button" value="保存" @click="saveImage" />
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data() {
    return {
      dogs: [
        {
          dogetc_image: "",
        },
      ],
    };
  },
  methods: {
    handleDogetcImage(res, file) {
      console.log(res);
      this.dogs.dogetc_image = res.data;
    },
    saveImage() {
      let dogetc_image = this.dogs.dogetc_image;
      let dog = {
        u_id: this.$store.state.person.id,
        dogetc_image: dogetc_image,
      };
      console.log(dog);
      axios.post(commons.baseUrl + "user/pet/addetcImage", dog).then((resp) => {
        console.log(resp);
        this.$message(resp.data.message);
      });
    },
    findImage() {
      axios
        .get(
          commons.baseUrl +
            "user/pet/selectdogetc_image?u_id=" +
            this.$store.state.person.id
        )
        .then((res) => {
          console.log(res);
          if (res.data.data == "" || res.data.data == null) {
            this.$message(res.data.message);
          }
          this.dogs = res.data.data;
        });
    },
  },
  mounted() {
    this.findImage();
  },
  computed: {},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #fffbfb;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 550px;
  height: 500px;
  display: block;
}
</style>
